<template>
  <ul class="header" :class="{gradual:gradual}" :style="customizedStyle">
    <li class="left" @click.prevent="back" >
      <a href="" v-if="!noLeft" :style="leftStyle">
        <i class="zhk-nav_back"></i>
      </a>
    </li>
    <li class="middle" @click.stop="middleOpertation">{{middleTitle||""}} <slot name="slotMiddle"></slot></li>
    <li class="right" :class="{rightDisabled:rightDisabled}" @click.stop="opertation">{{rightTitle||""}}
      <slot></slot>
    </li>
    <li class="slot2" @click.stop="opertation2">
       <slot name="slot2"></slot>
    </li>
  </ul>
</template>

<script>
import Vue from "vue";
import config from "../../base/profile/config.json";
import jsBridge from "../../tools/jsBridge.js";
import {MessageBox } from "mint-ui";
export default {
  name: "customHeader",
  data() {
    return {};
  },

  props: {
    leftTitle: String,
    rightTitle: String,
    middleTitle: String,
    rightDisabled:  {
       type:Boolean,
       default: false,
    },
    noLeft: {
       type:Boolean,
       required: false,
       default: false,
    },
    //背景渐变色
    gradual: {
       type:Boolean,
       required: false,
       default: false,
    },
    jsBridgeBack: {
       type:Boolean,
       default: true,
    },
    customizedStyle: {
      type: Object,
      default: ()=> ({})
    },
    leftStyle: {
      type: Object,
      default: ()=> ({})
    }
  },
  methods: {
    bindBackEvent: function() {
      let self = this;
      if(this.jsBridgeBack){
        jsBridge.addBackEventListener(function() {
          self.back();
          return false;
        });
      }
    },
    back() {
      if (this.noLeft) {
        return;
      }
      window.CommonUtil.clearInputFocusWhenBack();
      setTimeout(() => {
        if (this.$listeners.leftCallBack) {
          //如果监听返回按钮就走父组件监听函数，如果没有监听就默认走路由返回
          this.$emit("leftCallBack");
        } else {
          MessageBox.close();

          if(String(this.$route.query.close) == 'true'){
            if (this.middleTitle == '待办事项' || this.middleTitle == '系统消息') {
              jsBridge.routerBeforeEach({toName: 'MessagePage'});
            }

            jsBridge.closeWindow();
          }else{
            this.$router.back();
          }
        }
      }, 100);
    },
    opertation() {
      this.$emit("rightCallBack");
    },
    opertation2() {
      this.$emit("rightCallBack2");
    },
    middleOpertation() {
      this.$emit("middleCallBack");
    }
  },
  mounted() {
    this.bindBackEvent();
  }
};
</script>
<style lang='scss'>
@import "header";
</style>
